<template>
	<view style="width: 100%;">
		<u-cell-item @click="show=true" :title="current.label || placeholder"></u-cell-item>
		<u-select v-model="show" @confirm="selected" :mode="mode" :default-value="defaultValue" :list="list" :label-name="labelName" :value-name="valueName"></u-select>
	</view>
</template>

<script>
export default {
	model: {
		prop: 'value',
		event: 'input'
	},
	props: {
		value: {
			type: String,
			default: function() {
				return ''
			}
		},
		placeholder: {
			type: String,
			default: function() {
				return '请选择'
			}
		},
		mode: {
			type: String,
			default: function() {
				return 'single-column'
			}
		},
		list: {
			type: Array,
			default: function() {
				return []
			}
		},
		labelName: {
			type: String,
			default: function() {
				return 'dictCode'
			}
		},
		valueName: {
			type: String,
			default: function() {
				return 'dictValue'
			}
		}
	},
	mounted: function() {
		if (this.value) {
			if (this.list && this.list.length > 0) {
				for(let i in this.list) {
					if (this.list[i][this.valueName] == this.value) {
						this.current = {
							label: this.list[i][this.labelName],
							value: this.list[i][this.valueName]
						};
						this.defaultValue.push(Number(i));
						break;
					}
				}
			}
		}
	},
	data() {
		return {
			show: false,
			defaultValue: [], // 黙认下标
			current: {}, // 当前选中
		};
	},
	methods: {
		// 选择项
		selected: function(e) {
			if (e && e.length > 0) {
				this.current = e[0];
				this.$emit('input', e[0].value)
			}
			this.show = false;
		}
	}
}
</script>

<style lang="scss" scoped>
</style>
